<script setup lang="ts">
import { ref } from 'vue'
import { get } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
const paramValue = ref('')
const recommendCustomerView = ref({})
const mySelf = ref({})
const carMasterStatus = ref(-1)
const memberChildrenStatic = ref({})
const myMembers = ref([])
const loading = ref(false)
const finished = ref(false)
const noEmpty = ref(false)

const page = ref(1)
const limit = 10
queryMyChildrenStatic()
function onClickLeft() {
  window.history.back()
}
function queryMyChildrenStatic() {
  get('/memberWechatNew/queryMyChildrenStatic', {}).then((res) => {
    if (res.code == 0) {
      recommendCustomerView.value = res.data
      memberChildrenStatic.value = res.data
      mySelf.value = res.data.member
    }
  })
}
function onLoad() {
  queryData()
}

function queryData() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  get('/memberWechatNew/queryMyChildreen', {
    limit: limit,
    page: page.value,
    paramValue: paramValue.value,
    carMasterStatus: carMasterStatus.value,
  })
    .then((res) => {
      if (res.code === 0) {
        // 正常返回数据
        loading.value = false
        noEmpty.value = false
        res.data.forEach((item) => {
          myMembers.value.push({
            ...item,
          })
        })
        if (page.value == res.totalPage) {
          loading.value = true
          finished.value = true
          noEmpty.value = false
        } else {
          page.value++
        }
      } else {
        //其他返回数据情况
        if (res.count > 0) {
          //有数据情况
          if (res.code == 201) {
            loading.value = true
            finished.value = true
            noEmpty.value = false
          }
        } else {
          //无数据情况
          loading.value = true
          finished.value = true
          noEmpty.value = true
        }
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
function onSearch(ov: string) {
  paramValue.value = ov
  initPage()
  onLoad()
}
function onCancel() {
  paramValue.value = ''
  initPage()
  onLoad()
}
function handleClick(event) {
  const value = event.target.getAttribute('data-value') // 获取data-id属性
  const tempState = carMasterStatus.value
  if (tempState == value) {
    carMasterStatus.value = -1
  } else {
    carMasterStatus.value = value
  }
  initPage()
  onLoad()
}
function initPage() {
  myMembers.value = []
  loading.value = true
  finished.value = false
  noEmpty.value = false

  page.value = 1
}
</script>
<template>
  <van-nav-bar title="我的下级" left-text="返回" left-arrow @click-left="onClickLeft" />
  <van-search
    v-model="paramValue"
    show-action
    placeholder="请输入电话或姓名搜索"
    @search="onSearch"
    @cancel="onCancel"
  />
  <div class="myChildreenTagContent">
    <div class="myChildreenTagContentItem">
      <van-tag
        :plain="carMasterStatus != 1"
        type="primary"
        size="large"
        color="var(--main-color)"
        data-value="1"
        @click="handleClick"
        >待认证</van-tag
      >
    </div>
    <div class="myChildreenTagContentItem">
      <van-tag
        :plain="carMasterStatus != 2"
        type="primary"
        size="large"
        color="var(--main-color)"
        data-value="2"
        @click="handleClick"
        >已认证</van-tag
      >
    </div>
  </div>
  <div class="myPointDes">
    <div class="myRewardHeader">
      <div style="padding: 12px">
        <h2 style="text-align: left">
          扫码次数:<span>{{ memberChildrenStatic.scanNum || 0 }}</span>
        </h2>
      </div>
      <div style="padding: 12px">
        <h2 style="text-align: left">
          我的下级:<span>{{ memberChildrenStatic.myChildrenNum || 0 }}</span>
        </h2>
      </div>
    </div>
  </div>

  <van-empty
    v-if="noEmpty == true"
    :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
    image-size="100"
    description="暂无数据"
  />
  <van-list
    v-else
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="recommendCustomerContent" v-for="member in myMembers" :key="member.dbid">
      <div class="recommendCustomerHeadr">
        <div class="recommendCustomerTitle">姓名：{{ member.name || 无 }}</div>
        <div class="recommendCustomerTitle">联系电话：{{ member.mobilePhone }}</div>
      </div>
      <div class="recommendCustomerInnerItem" @click="detailTo(member.dbid)">
        <div class="recommendCustomerInnerItemImg">
          <img :src="VUE_APP_BASE_API + '/images/vue/recommendCar.png'" width="100" />
        </div>
        <div class="recommendCustomerInnerItemContent">
          <van-cell-group
            style="
              --van-cell-line-height: 18px;
              --van-cell-label-font-size: 12px;
              --van-cell-vertical-padding: 6px;
              --van-cell-value-font-size: 12px;
            "
          >
            <van-cell title="关注时间" :value="member.createTime" />
            <van-cell
              title="注册时间"
              :value="member.memAuthDate || '无'"
              ellipsis
              class="van-cell"
            />
            <van-cell
              title="车主认证状态"
              :value="member.carMasterStatusName || '无'"
              ellipsis
              class="van-cell"
            />
            <van-cell
              v-if="member.carMasterStatus == 2"
              title="认证时间"
              :value="member.carMasterDate || '无'"
              ellipsis
              class="van-cell"
            />
          </van-cell-group>
        </div>
      </div>
      <div v-if="mySelf.staffStatus == 1 && member.carMasterStatus != 2">
        <hr class="hrdashed" />
        <div class="myChildreenOp">
          <van-button type="success" class="opbutton" :to="'/carMasterAuth?memberId=' + member.dbid"
            >车主认证</van-button
          >
        </div>
      </div>
    </div>
    <br />
  </van-list>
  <br />
</template>
